<template>
  <u-popup :show="show" mode="center" @close="closeHandle" bgColor="transparent">
    <view class="discount-modal-a-wrapper">
      <view class="img-bg-wrapper">
        <image class="img-bg" :src="staticImgs.bgD" mode=""></image>
      </view>
      <view class="placehoder-box"></view>
      <view class="discount-modal-a-position">
        <view class="discount-modal-a">
          <view class="top-box">
            
            <view class="coupon-box">
                <view class="row-1">
                  <view class="text-1">400</view>
                  <view class="text-2">元</view>
                </view>
                <view class="row-2">满减券 - 咨询可用</view>
            </view>
            
            <view class="coupon-box">
                <view class="row-1">
                  <view class="text-1">8</view>
                  <view class="text-2">折</view>
                </view>
                <view class="row-2">优惠券 - 测评可用</view>
            </view>
            
          </view>
          <view class="bottom-box">
            <view class="btn-box" @click="closeHandle">
              立即领取
            </view>
          </view>

        </view>

        <view class="close-icon" @click="closeHandle">
          <u-icon name="close-circle" color="#fff" size="36"></u-icon>
        </view>
      </view>


    </view>
  </u-popup>
</template>

<script>
  // 新用户 咨询400&测评8折券
  import {
      getOldUserDiscount
    } from '@/common/api/user_api.js'
    import { debounce } from 'lodash'

    import {STORE_VAR} from '@/common/dict.js'
        // import { debounce } from 'lodash'

    
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      getEvent:{
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        show: false,
        staticImgs: {
          bgD: this.imgBaseURL + '/coupon_bg_2.png',
        },
        // discountUid:'',
        loading:false,
      }
    },
    watch: {
      visible: {
        handler(val) {
          this.show = val
        },
        immediate: true
      },
    },
    methods: {
      // showModal(val){
      //   this.show = true
      //   this.discountUid = val
      // },
      
     closeHandle: debounce(async function(){
        uni.setStorageSync(STORE_VAR.showNewUserCouponPopup,'Y')
        if(this.loading){
          return false
        }
        this.loading = true
        
        if(this.getEvent){
          const {data:dRes} = await getOldUserDiscount()
          if(dRes.success){
            this.$showToast('领取成功')
            this.show = false
            this.$emit('close')
          }else{
            this.$showToast('领取失败,请再次点击')
          }
        }else{
          this.show = false
          this.$emit('close')
        }
        
        setTimeout(()=>{
          this.loading = false
        },1500)
      },500)

    }
  }
</script>

<style lang="scss" scoped>
  $w:750rpx;
  $h:944rpx;
  
  .discount-modal-a-wrapper {
    position: relative;

    .img-bg-wrapper {
      display: flex;
      justify-content: center;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;

      .img-bg {
        width: $w;
        height: $h;
        margin: auto;
      }
    }

    .placehoder-box {
      height: 898rpx;
      width: 750rpx;
    }

    .discount-modal-a-position {
      position: absolute;
      display: flex;
      justify-content: center;
      flex-direction: column;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;

      .discount-modal-a {
        width: $w;
        height: $h;
        margin: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .top-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 188rpx;
          row-gap: 40rpx;
          
          
          .coupon-box{
            .row-1 {
              
              display: flex;
              justify-content: center;
            
              .text-1 {
                font-size: 80rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FD3F74;
              }
            
              .text-2 {
                font-size: 40rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FD3F74;
              
                padding-top: 40rpx;
              }
            }
            
            .row-2 {
              font-size: 26rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #D84F40;
            
              width: 260rpx;
              height: 60rpx;
              border-radius: 30rpx;
              border: 2rpx solid #FFBBB4;
            
              text-align: center;
              line-height: 60rpx;
              margin-top: -10rpx;
            }
            
            
            
          }

        }





      }

      .bottom-box {
        // margin-top: 160rpx;
        // margin-bottom: 20rpx;
        margin-bottom: 182rpx;

        .btn-box {
          width: 300rpx;
          text-align: center;
          height: 120rpx;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          
          font-size: 30rpx;
          font-family: PingFang-SC-Heavy, PingFang-SC;
          font-weight: 800;
          color: #BF471C;
        }
      }
    }


    .close-icon {
      margin: auto;
      // margin-top: 40rpx;
      display: flex;
      justify-content: center;
    }

  }
</style>